<template>
	<view>
		<view @click="gotoDetail(film)">
			<!-- 图片 -->
			<image :src="film.cover.url" class="film-img"></image>
			<!-- 电影信息 -->
			<view class="film-info">
				<view class="film-name">
					{{film.title}}
				</view>
				<view class="film-star">
					<image src="../../static/imgs/star-open.png" mode="widthFix" class="star" wx:for={{num}} wx:key='index'></image>
					<text class="film-rating">{{film.rating.value||'暂无评分'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			film:{
				type:Object,
				default:{}
			}
			
		},
		name:"film-item",
		data() {
			return {
				starNum:1,
				value:0
			};
		},
		methods:{
			gotoDetail(film){
				uni.navigateTo({
					url:'../../subpkg/filmDetail/filmDetail?id='+film.id
				})
				
				// console.log('1')
				// console.log(this.film)
				// console.log('2')
			}
		},
		computed:{
			// const s=this.film.rating.value
			num:function (){
				if(this.film.rating.value){
					this.starNum=(this.film.rating.value)/2;
					return  Math.round(this.starNum)
				}else{
					
				return 0
				}
				
				
			}
		},
		onLoad() {
			// console.log('1')
			// console.log(this.film)
			// console.log('2')
		}
	}
</script>

<style lang="scss">
//图片
.film-img{
	width: 200rpx;
	height: 280rpx;
}
	//电影信息
.film-info{
	width: 100%;
	.film-name{
		font-size: 26rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.film-star{
		display: flex;
		align-items: center;
		// border: 1px solid red;
		.star{
			width: 25rpx;
		}
		.film-rating{
			font-size: 22rpx;
			color: #999;
			padding-left: 8rpx;
		}
	}
}
	
</style>
